iT邦幫忙

DAY 23
0

JavaScript學習路系列 第 23

JavaScript學習路-(23)表單驗證-1

  • 分享至 

  • xImage
  •  

一個網站除了瀏覽、購物、查詢等等的功能以外,最普遍的應該就是傳送表單的回饋機制。
不管怎麼樣都會有聯絡我們之類的表單,或者單純填寫訂單也會需要用到。
因為不知道每台電腦面前是何許人也,糊裏糊塗(寫錯資料)還是鬼靈精怪(我就是想亂寫),
要減少收到錯誤訊息,錯失聯絡客戶的機會,表單提示跟資料驗證就很重要。

表單 (form) 物件裡通常有input, radio, check box, button 等欄位,
JavaScript 除了可以從 ID, class name 抓取資料以外,還能從 name 屬性獲取,且比較方便。
有 ID 為什麼不用而要用 name 呢?像這樣:
用 getElementById 抓值
先執行 clickFunction(); 後,再抓按下按鈕的動作 alertInputValue();,
最後顯示 inputField 中的值。
用 name 抓值
按下按鈕後執行一個參數叫做 formParameter 的 myFunction,然後顯示 name 中的值。
恩...看起來用 name 抓比較簡單一點...

學會用 name 抓取資料後發現:
拿到的資料有錯誤?必填項目得到空白的該怎辦?
有時候使用者需要適時地提醒,利用 onfocus 跟 onblur 或 onchange ,
在使用者輸入、輸入完畢離開的時候先做判斷,不符合規範的時候提示訊息。

onfocus 事件元素被聚焦的時候觸發
onblur 事件在元素“失去焦點”的時候觸發,意指不管有沒有輸入資料都會觸發。
onchange 事件當元素內容被改變的時候觸發,但當值沒有改變時也意味著什麼事都沒發生。

onblur 跟 onchange 好像很像,但實際上是有差異的。
看看例子會更清楚:網址請點我
請直接點輸入欄位,什麼都不做直接跳開:
onfocus 只要跳開欄位就會跳出 alert ,但 onchange 什麼動靜也沒有。
如果使用者什麼也沒做就把表單送出,可以想見又是一場烏龍要發生了。
唔所以...還是請用 onblur

本文同步發表於 http://azzurro.blog.aznc.cc/learn_javascript_23/


上一篇
JavaScript學習路-(22)JSON-2
下一篇
JavaScript學習路-(24)表單驗證-2
系列文
JavaScript學習路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言